

<!-- list -->
<ul class="nav" ng-repeat="item in app.tree">

  <li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
    <span translate="{{item.name}}">{{item.name}}</span>
  </li>

  <li ng-class="{active:$state.includes('app.page')}" ng-repeat="subItem in item.children">
    <a ui-sref="{{subItem.url}}" class="auto">
      <span class="pull-right text-muted" ng-if="subItem.children.length>0">
        <i class="fa fa-fw fa-angle-right text"></i>
        <i class="fa fa-fw fa-angle-down text-active"></i>
      </span>
      <i class="{{subItem.icon}}"></i>
      <span translate="{{subItem.name}}">{{subItem.name}}</span>
    </a>

    <!-- 子集-->
    <ul class="nav nav-sub dk">
      <!-- 头部 -->
      <li class="nav-sub-header">
        <a ui-sref="{{subItem.url}}">
          <span translate="{{subItem.name}}">{{subItem.name}}</span>
        </a>
      </li>

      <!-- 子集-->
      <li ng-class="{active:$state.includes('app.page')}" ng-repeat="thirdItem in subItem.children" ng-init="thirdItem.show=false">

        <a ui-sref="{{thirdItem.url}}" class="auto" ng-click="thirdItem.show=!thirdItem.show">
          <span class="pull-right text-muted"  ng-if="thirdItem.children.length>0">
            <i class="fa fa-fw fa-angle-right text"></i>
            <i class="fa fa-fw fa-angle-down text-active"></i>
          </span>
          <i></i>
          <span translate="{{thirdItem.name}}">{{thirdItem.name}}</span>
        </a>

        <ul class="nav nav-sub dk" ng-if="thirdItem.children.length>0 && thirdItem.show">
          <li ng-class="{active:$state.includes('app.page')}" ng-repeat="fourItem in thirdItem.children">
            <a class="m-l" ui-sref="{{fourItem.url}}">
              <span translate="{{fourItem.name}}">{{thirdItem.name}}</span>
            </a>
          </li>

        </ul>
      </li>

    </ul>
  </li>
</ul>
<!-- / list -->